<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人信息</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3576974_v9c8ti37y2c.css">
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/commons.js"></script>
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            transition: all linear .2s;
        }

        body, button, input, option, select, td, textarea {
            font-family: arial, verdana, helvetica, 'PingFang SC', 'HanHei SC', STHeitiSC-Light, Microsoft Yahei, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        a, b, body, button, dd, div, dl, em, footer, form, h1, h2, h3, h4, h5, h6, i, input, label, li, nav, p, select, span, td, textarea, u, ul {
            padding: 0;
            margin: 0;
            -webkit-tap-highlight-color: transparent;
            -webkit-text-size-adjust: none;
        }

        #header {
            width: 100%;
            height: 49px;
            background: #202329;
            box-shadow: 0 1px 8px rgb(0 0 0 6);
            position: relative;
            z-index: 1005;
            float: left;
        }

        #header a {
            color: #fff;
            font-size: 14px;
        }

        a {
            text-decoration: none;
        }

        .logo {
            float: left;
            padding: 6px 0 0 0;
        }

        .logo a {
            display: block;
            width: 110px;
            height: 36px;
            background: url(https://static.zhipin.com/zhipin-geek/v568/web/geek/images/logo-2x.png) 3px 7px no-repeat;
            background-size: 105px 19px;
        }

        .inner {
            width: 1184px;
            margin: 0 auto;
        }

        .home-inner {
            max-width: 1184px;
        }

        .nav-figure img {
            width: 26px;
            height: 26px;
            border-radius: 100%;
            vertical-align: middle;
        }

        li {
            list-style: none;
            display: inline;
        }

        .nav, .user-nav {
            float: left;
            margin-left: 15px;
            height: 49px;
            line-height: 49px;
        }

        .nav li a, .user-nav li a {
            float: left;
            display: block;
            padding: 0 5px;
            position: relative;
        }

        .nav li, .user-nav li {
            display: inline-block;
            vertical-align: top;
            text-align: center;
            font-size: 14px;
            margin: 0 7px;
        }

        .nav-search {
            float: left;
            position: relative;
            width: 170px !important;
            padding: 10px 0 0 20px !important;
        }

        .nav-search .ipt-search {
            border: 1px #5dd5c8 solid;
            width: 150px;
            height: 20px;
            padding: 3px 12px;
            line-height: 20px;
            border-radius: 20px;
            font-size: 12px;
            background: 0 0;
            color: #9fa3b0;
        }

        .nav-search .btn-search {
            width: 28px;
            height: 26px;
            background-position: 10px -1719px;
            background-color: transparent;
            position: absolute;
            top: 10px;
            right: 0;
        }

        .btn-search {
            border: none;
            color: #fff;
            font-size: 22px;
            line-height: 29px;
        }

        #header .search-form-con {
            width: 200px;
        }

        .nav-search .btn-search {
            width: 28px;
            height: 26px;
            background-position: 10px -1719px;
            background-color: transparent;
            position: absolute;
            top: 10px;
            right: 0;
        }

        .user-nav {
            float: right;
            margin-left: 5px;
            position: relative;
        }

        .nav, .user-nav {
            margin-left: 15px;
            height: 49px;
            line-height: 49px;
        }

        .label-text {
            padding-right: 20px;
        }

        .nav-figure .dropdown {
            display: none;
            position: absolute;
            width: 234px;
            left: auto;
            right: 0;
            top: 49px;
            z-index: 2;
            text-align: left;
            -webkit-box-shadow: 1px 2px 14px rgb(0 0 0 / 11%);
            box-shadow: 1px 2px 14px rgb(0 0 0 / 11%);
            background-color: #f2f5fa;
        }

        .dropdown {
            display: none;
            width: 202px;
        }

        #header .nav-figure .dropdown a.vip-info {
            position: relative;
            height: 84px;
            padding: 0;
            width: 234px;
        }

        #header .nav-figure .dropdown a {
            position: relative;
            padding: 10px 25px;
            line-height: 22px;
            /*color: #414a60;*/
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: #fff;
        }

        #header .nav-figure .dropdown a.vip-info .vip-card-bg {
            width: 202px;
            height: 63px;
            position: absolute;
            top: 10px;
            left: 15px;
            border-radius: unset;
        }

        .nav-figure img {
            width: 26px;
            height: 26px;
            border-radius: 100%;
            vertical-align: middle;
            *margin-top: -2px;
        }

        img {
            border: none;
        }

        .nav-figure .dropdown {
            display: none;
            position: absolute;
            width: 234px;
            left: auto;
            right: 0;
            top: 49px;
            z-index: 2;
            text-align: left;
            -webkit-box-shadow: 1px 2px 14px rgb(0 0 0 / 11%);
            box-shadow: 1px 2px 14px rgb(0 0 0 / 11%);
            background-color: #f2f5fa;
        }

        #header .nav-figure .dropdown a .status {
            position: absolute;
            z-index: 1;
            font-size: 16px;
            font-weight: 600;
            color: #805430;
            left: 30px;
            top: 20px;
        }

        #header .nav-figure .dropdown a .desc {
            position: absolute;
            z-index: 1;
            font-size: 12px;
            color: #805430;
            line-height: 17px;
            left: 30px;
            bottom: 20px;
        }

        #header .nav-figure .dropdown a {
            display: block;
            width: 184px;
            position: relative;
            padding: 10px 25px;
            line-height: 22px;
            color: #414a60;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: #fff;
        }

        #header .nav-figure .dropdown a .link {
            position: absolute;
            z-index: 1;
            font-size: 12px;
            color: #805430;
            line-height: 17px;
            right: 30px;
            bottom: 20px;
        }

        #header .nav-figure .dropdown a .link img {
            width: 12px;
            height: 12px;
        }

        #header .nav-figure .dropdown a span {
            display: block;
            font-size: 12px;
            color: #9fa3b0;
            line-height: 22px;
        }

        #header .nav-figure .dropdown a.link-logout, #header .nav-figure .dropdown a.link-recruit {
            margin-top: 6px;
        }

        .nav-figure:hover .dropdown {
            display: block;
        }

        #header a:hover {
            color: #00d7c6;
        }

        #header .nav-figure .dropdown a:hover {
            background-color: #f2f5fa;
            color: #414a60;
        }

        #header .nav-figure .dropdown a.link-logout:hover, #header .nav-figure .dropdown a.link-recruit:hover {
            background-color: #fff;
            color: #00d7c6;
            cursor: pointer;
        }

        .main {
            width: 100vw;
            height: 990px;
            background-color: rgb(238, 240, 245);
        }

        .item {
            width: 1500px;
            height: 900px;
            padding-top: 60px;
            margin: 0 auto;
            position: relative;
            background: rgb(255, 255, 255);
        }

        .item_left {
            width: 250px;
            height: 900px;
            position: absolute;
            background-color: rgb(248, 249, 252);
        }

        .item_left div {
            width: 100%;
            height: 50px;
            text-align: center;
            padding-top: 20px;
            cursor: pointer;
            line-height: 35px;
            font-size: 18px;
        }

        .item_left div:hover {
            background-color: rgb(227, 231, 237);
        }

        .item_right {
            width: 85%;
            height: 900px;
            float: right;
            position: relative;
            overflow: auto;
        }

        .item_right_one {
            /*display: none;*/
        }

        .item_right_two {
            display: none;
        }

        .item_right_one img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            position: absolute;
            right: 50px;
        }

        .item_right_one_one h2 {
            line-height: 100px;
            margin-left: 60px;
            font-size: 30px;
        }

        .item_right_one_one {
            width: 1200px;
            height: 100px;
            position: relative;
        }

        .item_right_one_one span {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 100px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }

        .item_right_one_two {
            width: 1200px;
            height: 120px;
            position: relative;
        }

        .item_right_one_two div:nth-child(1) {
            margin-left: 60px;
            padding: 5px;
        }

        .item_right_one_two div:nth-child(2) {
            margin-left: 60px;
            padding: 5px;
        }

        .item_right_one_two img {
            position: absolute;
            top: 0px;
        }

        .item_right_one_two div, span {
            font-size: 18px;
        }

        .item_right_one_two span:nth-child(2) {
            margin-left: 15px;
            font-size: 14px;
            color: rgb(255, 209, 173);
        }

        .one_br {
            width: 1100px;
            height: 1px;
            background-color: rgb(237, 240, 245);
            margin: 0 auto;
        }

        .item_right_one_three {
            width: 100%;
            height: 140px;
            line-height: 60px;
            position: relative;
        }

        .item_right_one_three h2 {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 30px;
        }

        .item_right_one_three span:nth-child(2) {
            margin-left: 60px;
        }

        .item_right_one_three span:nth-child(3) {
            margin-left: 20px;
            font-size: 16px;
            color: rgb(141, 145, 160);
        }

        .item_right_one_three span:nth-child(4) {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 60px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }

        .item_right_one_four {
            width: 100%;
            height: 150px;
            line-height: 60px;
            position: relative;
        }

        .item_right_one_four div:nth-child(1) {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 30px;
        }

        .item_right_one_four span:nth-child(2) {
            position: absolute;
            top: 0px;
            left: 230px;
            font-size: 16px;
            color: rgb(141, 145, 160);
        }

        .item_right_one_four span:nth-child(3) {
            margin-left: 60px;
            font-size: 16px;
            color: rgb(141, 145, 160);
        }

        .item_right_one_four span:nth-child(4) {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 60px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }

        .item_right_one_six {
            width: 100%;
            height: 150px;
            line-height: 60px;
            position: relative;
        }

        .item_right_one_six div:nth-child(1) {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 30px;
        }

        .item_right_one_six span:nth-child(2) {
            position: absolute;
            top: 0px;
            left: 230px;
            font-size: 16px;
            color: rgb(141, 145, 160);
        }

        .item_right_one_six span:nth-child(3) {
            margin-left: 60px;
            font-size: 16px;
            color: rgb(141, 145, 160);
        }

        .item_right_one_six span:nth-child(4) {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 60px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }

        .item_right_one_five {
            width: 100%;
            height: 200px;
            line-height: 60px;
            position: relative;
        }

        .item_right_one_five h2:nth-child(1) {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 30px;
        }

        .item_right_one_five span:nth-child(1) {
            margin-left: 60px;
            font-size: 16px;
            color: rgb(141, 145, 160);
            position: absolute;
            top: 50px;
        }

        .item_right_one_five h2:nth-child(2) {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 80px;
        }

        .item_right_one_five span:nth-child(2) {
            margin-left: 60px;
        }

        .item_right_one_five span:nth-child(3) {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 60px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }

        .item_right_one_six {
            width: 100%;
            height: 200px;
            line-height: 60px;
            position: relative;
        }

        .item_right_one_six h2:nth-child(1) {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 30px;
        }

        .item_right_one_six span:nth-child(1) {
            margin-left: 60px;
            font-size: 16px;
            color: rgb(141, 145, 160);
            position: absolute;
            top: 50px;
        }

        .item_right_one_six h2:nth-child(2) {
            font-size: 24px;
            margin-left: 60px;
            margin-top: 80px;
        }

        .item_right_one_six span:nth-child(2) {
            margin-left: 60px;
        }

        .item_right_one_six span:nth-child(3) {
            position: absolute;
            right: 60px;
            top: 0px;
            line-height: 60px;
            overflow: hidden;
            cursor: pointer;
            color: #00d7c6;
        }

        .head {
            width: auto;
            height: 60px;
            border: 1px solid cadetblue;
            text-align: right;
        }

        .head1 {
            border-radius: 90px;
            font-size: 20px;
            border: 1px cadetblue solid;
            text-align: right;
            cursor: pointer;
        }

        .head1:hover {
            color: #00D7C6;
        }

        .layui-nav-bar {
            opacity: 0;
        }
    </style>
</html>

<body>
    <div class="head">
        <ul class="layui-nav layui-bg-green">
            <li class="layui-nav-item"><a href="main.html">首页</a></li>
            <li class="layui-nav-item"><a href="defaultJob.html">职位</a></li>
            <li class="layui-nav-item"><a href="../../common/html/resume.html">简历</a></li>
            <li class="layui-nav-item" onclick="chat()">
                <a href="#">消息</a>
            </li>
            <li class="layui-nav-item">
                <div style="margin-left: 5px;">
                    <span class="head1 state" id="aa" onclick="login()">登录</span>
                    <span class="head1 state1" id="aaa" onclick="toUserPage()" style="display: none"></span>
                </div>
            </li>
        </ul>
    </div>
    <div class="main">
        <div class="main_item">
            <div class="item">
                <div class="item_left">
                    <div class="item_left_one" onclick="personShow()">个人信息</div>
                    <div class="item_left_two" onclick="personUpdate()">个人信息编辑</div>
                </div>
                <div class="item_right">
                    <div class="item_right_one">
                        <div class="item_right_one_one">
                            <h2>个人信息</h2>
                            <span onclick="javascrtpt:window.location.href='../../common/html/select_change.html' "
                                  id="change_pwd">修改登陆密码</span>
                        </div>
                        <div class="item_right_one_two">
                            <div>姓名：<span class="nickname">张三</span></div>
                            <div>职务：<span class="jname">求职者</span><span class="roleId">审核中</span></div>
                            <div><img class="photo2"></div>
                        </div>
                        <div class="one_br"></div>
                        <div class="item_right_one_six">
                            <div>已收藏岗位</div>
                            <span style="cursor: pointer"><a href="collect.html">点击查看已收藏岗位</a></span>
                        </div>
                        <div class="one_br"></div>
                        <div class="item_right_one_three">
                            <h2>手机号</h2>
                            <span class="username">152*****2626</span>
                            <span></span>
                        </div>
                        <div class="one_br"></div>
                        <div class="item_right_one_four">
                            <div>接收offer邮箱</div>
                            <span>收到offer后自动发送到邮箱</span>
                            <span class="email">您暂未添加常用邮箱</span>
                        
                        </div>
                        <div class="one_br"></div>
                        <div class="item_right_one_five">
                            <h2>您当前的身份是:</h2>
                            <span class="jname">"SEEKER"</span>
                            <span onclick="window.location.href='fk.html'">使用体验反馈</span>
                        </div>
                        <div class="item_right_one_six">
                            <h2>您收到的offer</h2>
                            <span class="offer"></span>
                            <span><a href="package/html/offer.html" target="_Blank" style="color: #0c85d0">点击查看</a></span>
                        </div>
                    </div>
                    <div class="item_right_two">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                            <legend>编辑个人信息</legend>
                        </fieldset>
                        
                        <form class="layui-form" action="" method="post">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="nickname" lay-verify="title" autocomplete="off"
                                           placeholder="" class="layui-input" value="">
                                </div>
                            </div>
                            <div class="layui-upload">
                                <button type="button" name="photo" class="layui-btn" id="test1"
                                        style="margin-left:50px">
                                    上传头像
                                </button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                                <div style="width: 95px;">
                                    <div class="layui-progress layui-progress-big" style="margin-left: 50px"
                                         lay-showpercent="yes" lay-filter="demo">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">出生日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="birthday" id="date" lay-verify="date"
                                           placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="email" lay-verify="title" autocomplete="off" placeholder=""
                                           class="layui-input">
                                </div>
                            </div>
                            
                            <div class="layui-form-item" pane="">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input class="man" type="radio" name="sex" value="0" title="男">
                                    <input class="woman" type="radio" name="sex" value="1" title="女">
                                </div>
                            </div>
                            
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        
                        </form>
                    </div>
                
                </div>
            
            </div>
        </div>
    </div>
</body>
<script src="../layui/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/commos.js"></script>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    function delteToken() {
        localStorage.removeItem(localStorage.getItem("token"));
    }

    let itemRightOne = document.querySelector(".item_right_one");
    let itemRightTwo = document.querySelector(".item_right_two");
    let username = document.querySelector(".username");

    function personShow() {
        itemRightOne.style.display = "block";
        itemRightTwo.style.display = "none";
    }

    function personUpdate() {
        itemRightTwo.style.display = "block";
        itemRightOne.style.display = "none";
    }

    $.ajax({
        url: URL + "user/info",
        type: "get",
        // data: "username = " + result.data.username,
        success: function (result) {
            console.log(result);
            let nickname = document.querySelector(".nickname");
            nickname.textContent = result.data.nickname;
            let nickname_1 = document.querySelector(("#nickname"));
            nickname_1.textContent = result.data.nickname;
            let photo = document.querySelector(".photo");
            let photo2 = document.querySelector(".photo2");
            let src = result.data.photo;
            photo.src = src;
            photo2.src = src;
            // let username = document.querySelector(".username");
            username.textContent = result.data.username;
            let email = document.querySelector(".email");
            email.textContent = result.data.email;
            $("input[name='nickname']").val(result.data.nickname);
            $("input[name='birthday']").val(result.data.birthday);
            $("input[name='username']").val(result.data.username);
            $("input[name='birthday']").val(result.data.birthday);
            $("input[name='password']").val(result.data.password);
            $("input[name='email']").val(result.data.email);
            $("input[name='birthday']").val(result.data.birthday);
            let val_0 = document.querySelector(".man");
            let val_1 = document.querySelector(".woman")
            val_0.checked = true;
            val_1.checked = false;
            if (result.data.sex == 0) {

                val_0.checked = true;
                val_1.checked = false;

            } else if (result.data.sex == 1) {
                val_0.checked = false;
                val_1.checked = true;
            }

        }
    });

    layui.use(['form', 'util', 'laydate', 'upload', 'element', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, photo, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                    console.log(photo.name);
                    return photo.name;
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 0) {
                    return '姓名不能为空';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });

        //提交事件
        form.on('submit(demo1)', function (data) {
            alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            $.ajax({
                url: URL + "user/updateRecruit",
                type: "post",
                data: data.field,
            });
            return false;
        });

    });
</script>

</html>